<template>
    <div>
        <div v-if="props.displayMode == 2 && props.id && !vLoading">
            <video v-if="isVido()" :src="authUrl" controls style="width: 200px;height: 280px;"></video>
            <el-image v-else :src="authUrl" fit="contain" style="width: 60px;height: 68px;">
            </el-image>
        </div>
        <div v-if="props.displayMode == 2 && vLoading" style="text-align: center;font-size: 12px;">加载中......</div>
        <div v-if="props.displayMode == 2 && error" style="text-align: center;font-size: 12px;">资源异常</div>


        <el-button v-if="(props.displayMode == 1 || !props.displayMode) && props.id" @click="resView" link
            type="primary">预览</el-button>

        <el-dialog title="预览" v-model="viewOpen" width="500px" append-to-body class="dialogclass">
            <div v-if="!vLoading" class="dialogContent">
                <video v-if="isVido()" :src="authUrl" controls style="width: 500px;height: 400px;"></video>
                <el-image v-else :src="authUrl" fit="contain" style="width: 200px;height: 280px;">
                </el-image>
            </div>
            <div v-else style="text-align: center;">加载中......</div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { fileView, ossGetObject, ossGetUrlObject } from '@/api/skit/resource'
import { computed, onMounted, onUpdated, ref, watch } from 'vue'
import { isSuccess, getFileSufixx } from '@/utils/pageUtils'


// displayMode 显示模式  1按钮预览 2直接预览
const props = defineProps(['id', 'displayMode', 'width', 'height'])
console.log('BppendixPreview:props', props.displayMode);
// 鉴权url
const authUrl = ref('')
// 文件后缀
const resViewType = ref('')
// 弹窗变量
const viewOpen = ref(false)
// 加载状态
const vLoading = ref(false)
// 资源是否正常标识
const error = ref(false)

// 生成鉴权资源
async function getSource() {
    console.log('BppendixPreview：getSource', props.id)
    if (!props.id) { return null; }
    vLoading.value = true;
    const formData = new FormData();
    formData.append('id', props.id)
    try {
        const respone = await ossGetObject(formData)
        if (isSuccess(respone)) {
            resViewType.value = getFileSufixx(respone.data.ossKey);
            console.log('BppendixPreview：url', respone.data.url);
            authUrl.value = respone.data.url;
        }
    } catch (error) {
        error.value = true;
    }
    vLoading.value = false;
}
// 生成指定宽高资源
async function getParamsSource() {
    console.log('BppendixPreview：getParamsSource');
    if (!props.id) { return null; }
    vLoading.value = true;
    const formData = new FormData();
    formData.append('id', props.id)
    formData.append('width', props.width)
    formData.append('height', props.height)
    try {
        const respone = await ossGetUrlObject(formData)
        if (isSuccess(respone)) {
            resViewType.value = getFileSufixx(respone.data.ossKey);
            console.log('BppendixPreview：url', respone.data.url);
            authUrl.value = respone.data.url;
        }
    } catch (error) {
        error.value = true;
    }
    vLoading.value = false;
}





watch(() => props.id, (newValue, oldValue) => {
    getSource();
})

onMounted(() => {
    if (props.displayMode == 2 && props.width && props.height) {
        // 预览模式，且存在高宽时
        getParamsSource()
    }
    // 查看模式下，直接请求资源url
    else if (props.displayMode == 2) {
        getSource();
    }
})

// 预览按钮点击事件
function resView() {
    viewOpen.value = true;
    getSource();
}
// 取消按钮
function cancel() {
    viewOpen.value = false;
}

//  判断文件格式是否属于视频
function isVido() {
    const videoType = import.meta.env.VITE_VIDEO_TYPE;
    return videoType.includes(resViewType.value.toLowerCase());
}
</script>

<style lang='scss'>
.dialogclass>.el-dialog__body {
    padding: 0 10px !important;
}

.dialogContent {
    display: flex;
    justify-content: center;
    align-content: center;
}
</style>